<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script>
    <title>157-标签页通信</title>
    <script type="module" crossorigin src="../../../../static/js/157-index.html-52d62f7e.js"></script>
    <link rel="modulepreload" crossorigin href="../../../../static/common/modulepreload-polyfill-3cfb730f.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/easyHash-50f2d0cf.js">
    <link rel="modulepreload" crossorigin href="../../../../static/common/time-c7cf8731.js">
  </head>

  <body>
    <div id="app" class="box">
      <div>
        <p>BroadcastChannel 与 postMessage 的区别是：</p>
        BroadcastChannel只能用于同源的页面之间进行通信，而postMessage却可以用于任何的页面之间的通信
      </div>
      <p>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/BroadcastChannel" target="_blank">
          BroadcastChannel API参考
        </a>
      </p>
      <hr />
      <p>当前标签id：{{ createId }}</p>
      <button @click="send">发送广播信息</button>
      <ol>
        <li v-for="(item, index) in messageList" :key="index">
          标签id：{{ item.createId }} - 发送时间：{{ item.time }} -- 发送内容：{{ item.content }}
        </li>
      </ol>
    </div>
    
  </body>
</html>
